{% load static %}
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食通行证</title>
    <style>
        :root {
            --primary: #FF6B6B;
            --secondary: #FF8E8E;
            --accent: #FFD166;
        }

        body {
            background-image: url("{% static 'images/背景x.jpg' %}");
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Helvetica Neue', sans-serif;
        }

        body::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(255,255,255,0.7);
            z-index: 0;
        }

        body::before {
            content: '';
            position: fixed;
            width: 200vw;
            height: 200vh;
            background: 
                radial-gradient(circle, rgba(255,107,107,0.1) 10%, transparent 20%),
                linear-gradient(45deg, transparent 48%, rgba(255,182,193,0.1) 50%, transparent 52%);
            background-size: 80px 80px, 100px 100px;
            animation: cosmicFlow 40s linear infinite;
            z-index: 0;
        }

        @keyframes cosmicFlow {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        .passport-container {
            width: 100%;
            max-width: 480px;
            background: white;
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 
                0 0 30px rgba(255,107,107,0.2),
                0 0 0 2px rgba(255,107,107,0.1),
                inset 0 0 20px rgba(255,107,107,0.1);
            position: relative;
            z-index: 1;
            border: 2px solid transparent;
            background-clip: padding-box;
            animation: none;
        }

        .passport-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, 
                var(--primary) 0%, 
                var(--secondary) 100%);
        }

        .passport-container::after {
            content: '';
            position: absolute;
            inset: -10px;
            z-index: -1;
            background: 
                repeating-linear-gradient(45deg,
                    transparent 0px,
                    transparent 15px,
                    rgba(255,107,107,0.3) 16px,
                    rgba(255,107,107,0.3) 20px
                ),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="%23ff6b6b"><path d="M50 20c-16 0-20 30-20 30s4 30 20 30 20-30 20-30-4-30-20-30zm0 45a15 15 0 110-30 15 15 0 010 30z"/><circle cx="30" cy="35" r="5"/><circle cx="70" cy="35" r="5"/></g></svg>');
            background-size: auto, 40px;
            animation: none;
            mask: 
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            mask-composite: exclude;
        }

        h1 {
            text-align: center;
            color: var(--primary);
            font-size: 2.4rem;
            margin: 2rem 0 3rem;
            position: relative;
            animation: none;
        }

        .passport-form {
            display: grid;
            gap: 1.5rem;
        }

        .input-group {
            position: relative;
        }

        .input-group input {
            width: 100%;
            padding: 1.2rem;
            border: 2px solid #ffe5e5;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: #fffafa;
        }

        .input-group input:focus {
            border-color: var(--primary);
            background: white;
            box-shadow: 0 0 0 3px rgba(255,107,107,0.1);
            outline: none;
            animation: none;
        }

        .input-label {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: #ff9f9f;
            pointer-events: none;
            transition: all 0.3s ease;
            background: white;
            padding: 0 0.5rem;
        }

        input:focus + .input-label,
        input:not(:placeholder-shown) + .input-label {
            top: -0.6rem;
            left: 0.8rem;
            font-size: 0.9rem;
            color: var(--primary);
        }

        button[type="submit"] {
            width: 100%;
            padding: 1.2rem;
            background: linear-gradient(135deg, 
                var(--primary), 
                var(--secondary));
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: transform 0.3s ease;
            margin-top: 1rem;
            position: relative;
            overflow: hidden;
        }

        button[type="submit"]:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255,107,107,0.3);
        }

        button[type="submit"]:active {
            animation: none;
        }

        button[type="submit"]::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 0%, 
                rgba(255,255,255,0.3) 0%, 
                transparent 70%);
            animation: none;
        }

        .switch-link {
            text-align: center;
            margin-top: 2rem;
            color: #666;
        }

        .switch-link a {
            color: var(--primary);
            text-decoration: none;
            position: relative;
            padding: 0.3rem 0;
        }

        .switch-link a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--secondary);
            transition: width 0.3s ease;
        }

        .switch-link a:hover::after {
            width: 100%;
        }

        @media (max-width: 480px) {
            .passport-container {
                margin: 1rem;
                padding: 1.5rem;
            }
            
            h1 {
                font-size: 2rem;
                margin: 1.5rem 0 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="passport-container">
        <h1>美食通行证</h1>
        <form method="POST" class="passport-form">
            {% csrf_token %}
            <div class="input-group">
                {{ form.username }}
                <span class="input-label">用户名</span>
            </div>
            <div class="input-group">
                {{ form.password1 }}
                <span class="input-label">设置密码</span>
            </div>
            <div class="input-group">
                {{ form.password2 }}
                <span class="input-label">确认密码</span>
            </div>
            <button type="submit">获取通行证</button>
            <p class="switch-link">
                已有账号? 
                <a href="{% url 'login' %}">立即登录</a>
            </p>
        </form>
    </div>
</body>
</html>
